<script lang="ts">
  import { DatePicker } from "@svelte-plugins/datepicker";
  import "./datepicker.css";
  import dayjs from "dayjs";

  interface Props {
    startTime: number;
    endTime: number;
    onChange: (newStartTime: number, newEndTime: number) => void;
  }

  let props: Props = $props();

  let startTime = $state(props.startTime);
  let endTime = $state(props.endTime);

  let isOpen = $state(false);
</script>

<DatePicker
  bind:isOpen
  bind:startDate={startTime}
  bind:endDate={endTime}
  isRange
  isMultipane
  enableFutureDates
  enablePastDates
  startOfWeek={1}
  monthLabels={[
    "一月",
    "二月",
    "三月",
    "四月",
    "五月",
    "六月",
    "七月",
    "八月",
    "九月",
    "十月",
    "十一月",
    "十二月",
  ]}
  dowLabels={["周日", "周一", "周二", "周三", "周四", "周五", "周六"]}
  onDateChange={() => props.onChange(startTime, endTime)}
>
  <button type="button" class="btn p-0" onclick={() => (isOpen = true)}>
    {dayjs(startTime).format("YYYY/MM/DD")}-{dayjs(endTime).format(
      "YYYY/MM/DD"
    )}
  </button>
</DatePicker>
